<template>
    <div class="comp" :style="{width:size.width+'px',height:size.height+'px'}">
        <div class="left">
            <img class="icon" src="http://iot.sxennp.com/iot4/platform/ciotFlow//moduleIcon/二维表.svg" alt="">
        </div>
        <div class="right" :style="rightStyle">
            时间窗口聚合
        </div>
    </div>
</template>
<script>

export default {
    inject: ['getNode'],
    data(){
        return{
            size:{},
        }
    },
    computed: {
        rightStyle(){
            const width = this.size?.width || 140
            const height = this.size?.height || 36
            const baseWidth = 140
            const baseHeight = 36
            const baseFont = 13
            const scale = Math.min(width / baseWidth, height / baseHeight)
            const font = Math.max(10, Math.min(22, Math.round(baseFont * scale)))
            return {
                fontSize: font + 'px',
                lineHeight: height + 'px',
            }
        }
    },
    mounted(){
        const node = this.getNode()
        this.size = node.size()
        
        // 监听节点大小变化
        node.on('change:size', ({ current }) => {
            this.size = current
        })
    }
}
</script>
<style scoped>
.comp{
    display: flex;
    background: rgb(216, 191, 216);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    overflow: hidden;
}

.left{
    width: 30px;
    height: 100%;
    flex: none;
    background: rgba(204,204,204,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon{
    width: 20px;
    height: 20px;
}
.right{
    flex:1;
    text-align: center;
}

</style>
